<template>
	<div class="content">
		<el-input 
		  :style="'direction:'+dir"
		  type="textarea"
		  :rows="row"
		  :placeholder="plc"
		  @input="handleChange"
		  v-model="text"
		></el-input>
	</div>
</template>

<script>
	export default{
		props:{
			plc:String,
			value:String,
			dir:{
				default:"ltr"
			},
			row:{
				default:8
			}
		},
		model:{
			prop:'value',         // 父组件v-model绑定的值传递给props中的value
			event:'parentChange'  // 通过emit触发parentChange将内部值传递给父组件v-model绑定的值
		},
		data() {
			return {
				text:this.value
			}
		},
		watch:{
			value:{
				handler(newValue , oldValue){
					this.text = newValue
				}
			}
		},
		methods:{
			handleChange(){
				// 通过$emit触发parentChange（model内定义）事件，将内部值传递给给父组件
				this.$emit("parentChange" , this.text);
			}
		}
	}
</script>

<!-- 
父组件使用方式 
<TextArea v-model="old_text" plc="تەرجىمە قىلماقچى بولغان تېكىستنى كىرگۈزۈڭ"></TextArea>
-->
<style scoped>
	.content .el-textarea{
		font-size: 16px;
	}
</style>